<script>
import * as echarts from 'echarts';
import resize from "@/components/Charts/mixins/resize";

export default {
  mixins: [resize],
  data() {
    return {
      activeName: '1',
      navList: [
        {
          iconClass: 'warehouse-settings-nav',
          name: '仓库',
          subName: '管理您的仓库信息',
          path: '/basic_settings/warehouse_settings',
        }, {
          iconClass: 'product-manager-nav',
          name: '商品资料',
          path: '/basic_settings/product_manager',
          subName: '管理商品信息及初始库存',
        }, {
          iconClass: 'customer-settings-nav',
          name: '客户',
          path: '/basic_settings/customer_settings',
          subName: '维护您的客户信息及欠款',
        }, {
          iconClass: 'supplier-manager-nav',
          name: '供应商',
          path: '/basic_settings/supplier_manager',
          subName: '维护您的供应商信息及欠款',
        }, {
          iconClass: 'settlement-account-nav',
          name: '结算账户',
          path: '/basic_settings/settlement_account',
          subName: '管理账户信息及初始余额',
        },
      ],
    }
  },
  mounted() {

  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    clickEvent(item) {
      this.$router.push({path: item.path});
    }
  }
}
</script>

<template>
  <div class="homepage disabled-warp"
       style=" overflow-y: auto; padding: 20px 20px 0 20px; display: flex;">
    <el-tabs style="width: 100%; box-shadow: none !important;" v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="1.初始资料️" name="1">
        <div style="font-size: 26px; margin-bottom: 8px; font-weight: 600; letter-spacing: 0; line-height: 36px;">初始资料录入</div>
        <div style="font-size: 14px; font-weight: 400; margin-bottom: 12px; letter-spacing: 0; line-height: 14px; opacity: 0.8;">及时准确的录入商品、客户、供应商与结算账户信息，能够有效的保障经营数据的完整以及后期账务的核算。</div>
        <el-divider />
        <div class="dashboard-container-wrap-inner" style="height: 100%; width: 100%; margin-right: 0;
           align-items: stretch; background: none !important; flex: 0 0 calc(50% - 6px); display: flex; align-content: flex-start; flex-wrap: wrap; ">
          <div class="homepage-quick-navigation" v-for="(item, index) in navList" @click="clickEvent(item)"
               style="margin-right: 10px; margin-bottom: 10px;  position: relative; background: #f6f8fd;  ">
            <div class="homepage-quick-navigation-inner"
                 :style="` position: absolute; flex-wrap: wrap;  left: 0; display: flex;`">
              <div style="display: flex; width: 100%;">
                <svg-icon :icon-class="item.iconClass" style="font-size: 22px;"/>
                <span style="display: flex; font-size: 18px; font-weight: 900; margin-left: 8px; align-items: center;">{{ item.name }}</span>
              </div>
              <div style="display: flex; line-height: 24px; margin-top: 6px; font-weight: 400; opacity: 0.8; font-size: 13px; margin-left: 0; align-items: center;">{{ item.subName }}</div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="2.进货" name="2">进货</el-tab-pane>
      <el-tab-pane label="3.销售" name="3">销售</el-tab-pane>
      <el-tab-pane label="4.库存" name="4">库存</el-tab-pane>
      <el-tab-pane label="5.财务" name="5">财务</el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="scss">
.dashboard {
  &-container {
    border-radius: 10px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.dashboard-container-wrap {
  line-height: 16px;
  height: 100%;
  flex-wrap: wrap;
  align-items: center;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #2F3745;
}

.dashboard-container-wrap-inner {
  margin-right: 10px;
  background: #fff;
  border-radius: 8px;
  height: 100%;
}

.homepage-quick-navigation {
  border-radius: 8px;
  width: 200px;
  height: 85px;
  background: #fff;
  display: flex;
  cursor: pointer;
  //align-items: center;
}

.homepage-quick-navigation-inner {
  border-radius: 8px;
  margin: 16px;
}

.homepage-quick-navigation:hover {
  color: #4955f5;
}

.homepage-quick-navigation:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.dashboard-inner {
  font-size: 16px;
  font-weight: 700;
  padding: 0 0 10px 0;
  color: #2f3745;
}

.homepage-client-number-wrapper {
  background: rgb(246, 247, 251);
  border-radius: 8px;
  margin: 8px 5px 0 0;
  padding: 8px;
  cursor: pointer;
}

.box-card {
  border-radius: 8px;
  height: 240px;
}

.box-card2 {
  border-radius: 8px;
  height: 160px;
}
</style>

<style>
.box-card .el-card__header {
  padding: 9px 10px !important;
}


.box-card .el-card__body {
  padding: 14px 10px;
  font-size: 16px;
  line-height: 26px;
}

.box-card2 .el-card__header {
  padding: 9px 10px !important;
}


.box-card2 .el-card__body {
  padding: 14px 10px;
  font-size: 16px;
  line-height: 26px;
}


.homepage-client-number-info {
  font-size: 14px;
  font-weight: 500;
  color: rgb(47, 55, 69);
  line-height: 20px;
}

.homepage-client-number {
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  margin-top: 5px;
  color: rgb(19, 163, 124);
}


.dashboard-container-wrap-inner .el-statistic .head {
  display: inline-block;
  line-height: 20px;
  font-size: 20px;
  position: absolute;
  left: 12px;
  color: rgb(44, 44, 44);
  font-weight: 500;
  top: 16px;
}

.dashboard-container-wrap-inner .el-statistic {
  height: 100%;
}

.dashboard-container-wrap-inner .el-statistic .con .number {
  padding: 0 !important;
  font-family: Helvetica Neue, Arial;
}

.dashboard-container-wrap-inner .el-statistic .con {
  position: absolute;
  bottom: 16px;
  left: 12px;
  font-size: 18px;
  color: rgb(44, 44, 44);
}
</style>
